<script lang="ts" setup>
import type { FormInstance } from '@arco-design/web-vue'
import { Message } from '@arco-design/web-vue'
import { useConfirm, useDictLabel, useForm } from '@/hooks'
import { ClassChangeApi } from '@/apis'
import { formatMoney } from '@/utils/common'

const emits = defineEmits(['success'])

const loading = ref<boolean>(false)
const visible = ref<boolean>(false)
const formRef = ref<FormInstance>()
const { form, resetForm } = useForm({
  recordId: undefined,
  refundPrice: undefined,
  refundType: 'FUIOU',
  finAccountId: undefined,
})
const recordInfo = ref<ClassChangeApi.ClassCancelDetailResp>()
const rules: FormInstance['rules'] = {
  refundType: [{ required: true, message: '请选择退款方式' }],
}

const open = async (data) => {
  recordInfo.value = await ClassChangeApi.getCancelDetail(data.id)
  form.recordId = data.id
  form.refundPrice = data.refund.refundPrice
  form.refundType = recordInfo.value.order?.payType
  form.finAccountId = recordInfo.value.order?.finAccountId
  visible.value = true
}

const reset = () => {
  formRef.value?.resetFields()
  resetForm()
}

const onPass = async () => {
  const isInvalid = await formRef.value?.validate()
  if (isInvalid) {
    return false
  }
  try {
    loading.value = true
    await ClassChangeApi.passCancelRecord(form)
    Message.success('通过成功')
    reset()
    emits('success')
    visible.value = false
  } finally {
    loading.value = false
  }
}

const onReject = async () => {
  try {
    loading.value = true
    await ClassChangeApi.rejectCancelRecord(form)
    Message.success('拒绝成功')
    reset()
    emits('success')
    visible.value = false
  } finally {
    reset()
    loading.value = false
  }
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal
    v-model:visible="visible"
    width="520px"
    title="审核退班退课"
    cancel-text="拒绝"
    ok-text="通过"
    :ok-loading="loading"
  >
    <a-card title="购课信息" class="section">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="购课支付方式">
            <span>{{ useDictLabel('PayTypeEnum', recordInfo?.order?.payType) }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="购课支付账户">
            <span>{{ recordInfo?.orderFinAccount?.name || '-' }}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
    <a-card title="退费信息" class="section">
      <a-form ref="formRef" layout="vertical" :model="form" :rules>
        <a-form-item label="退费金额">
          <span>{{ formatMoney(form.refundPrice) }}</span>
        </a-form-item>
        <a-form-item label="退费方式" field="refundType">
          <DictSelect v-model="form.refundType" code="PayTypeEnum" placeholder="请选择退费方式" type="button" />
        </a-form-item>
        <a-form-item label="退费账户" field="account">
          <AccountSelect v-model="form.finAccountId" placeholder="请选择退费账户" :disabled="form.refundType === 'FUIOU'" />
        </a-form-item>
      </a-form>
    </a-card>
    <template #footer>
      <a-space>
        <a-popconfirm content="确定拒绝退课申请吗?" type="warning" :ok-loading="loading" @ok="onReject">
          <a-button type="outline" status="danger">
            拒绝
          </a-button>
        </a-popconfirm>
        <a-popconfirm content="确定通过退课申请吗?" type="warning" :ok-loading="loading" @ok="onPass">
          <a-button type="primary">
            通过
          </a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-modal>
</template>

<style lang='less' scoped>
</style>
